<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();//获取项目名称
%>
<html>
<head>
    <title>质量饼形图</title>
    <link rel="stylesheet" href="<%=path%>/static/css/font.css">
    <link rel="stylesheet" href="<%=path%>/static/css/xadmin.css">
    <script src="<%=path%>/static/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="<%=path%>/static/js/xadmin.js"></script>
</head>
<body>
<div class="layui-fluid" id="divvuehtml">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <blockquote class="layui-elem-quote">质量饼形图统计
                    </blockquote>
                </div>
            </div>
        </div>

        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">数据统计</div>
                <div class="layui-card-body ">
                    <table class="layui-table" style="text-align: center">
                        <colgroup>
                            <col width="10%">
                            <col width="10%">
                            <col width="10%">
                            <col width="10%">
                            <col width="10%">
                            <col width="10%">
                            <col width="10%">
                            <col width="10%">
                            <col width="10%">
                            <col>
                        </colgroup>
                        <thead>
                        <tr>
                            <th style="text-align: center">类型</th>
                            <th style="text-align: center">星期一</th>
                            <th style="text-align: center">星期二</th>
                            <th style="text-align: center">星期三</th>
                            <th style="text-align: center">星期四</th>
                            <th style="text-align: center">星期五</th>
                            <th style="text-align: center">星期六</th>
                            <th style="text-align: center">星期日</th>
                            <th style="text-align: center">汇总</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>过程质量</td>
                            <td v-for="item in processqualities">{{ item }}</td>
                            <td>{{processqualitiesCount}}</td>
                        </tr>
                        <tr>
                            <td>客户抱怨</td>
                            <td v-for="item in processqualities">{{ item }}</td>
                            <td>{{processqualitiesCount}}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>


        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">过程质量统计</div>
                <div class="layui-card-body" style="min-height: 380px;">
                    <div id="main1" class="layui-col-sm12" style="height: 300px;"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">客户抱怨统计</div>
                <div class="layui-card-body" style="min-height: 380px;">
                    <div id="main2" class="layui-col-sm12" style="height: 300px;"></div>
                </div>
            </div>
        </div>
    </div>
    </div>
</body>
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
<script type="text/javascript" src="<%=path%>/static/js/jquery.min.js"></script>
<script type="text/javascript" src="<%=path%>/static/js/vue.js"></script>
<script th:inline="none">
    var ve = new Vue({
        el: '#divvuehtml',//绑定vue渲染范围
        data: {
           "processqualities":[],
           "processqualitiesCount":0,
           "customercomplaint":[],
           "customercomplaintCount":0
        },created: function () {//vue在打开html也没初始化创建函数
            this.getTableCount();
            this.ininChart();
            this.ininChart2();
        },mounted: function () {//初始化html完成后在进行操作
            setTimeout(function() {
                layui.use(['table','form','layer'],function() {
                    var form = layui.form;
                    var layer = layui.layer;
                });
            },100)
        },methods: {//调用函数
            getTableCount:function(){
                $.get("<%=path%>/api/processquality/getTableCount.do",function(data){
                    if(data.success){
                        ve.processqualities = data.data.processqualities;
                        var processqualitiesCount=0;
                        for (const x of ve.processqualities) {
                            processqualitiesCount+=x;
                        }
                        ve.processqualitiesCount = processqualitiesCount;

                        ve.customercomplaint = data.data.customercomplaint;
                        var customercomplaintCount=0;
                        for (const x of ve.customercomplaint) {
                            customercomplaintCount+=x;
                        }
                        ve.customercomplaintCount = customercomplaintCount;
                    }else{
                        xadmin.alert(data.msg,{icon:2});
                    }
                },"json")
            },
            ininChart:function () {
                $.get("<%=path%>/api/processquality/getChartCount.do",function(data) {
                    if (data.success) {
                        // 基于准备好的dom，初始化echarts实例
                        var myChart = echarts.init(document.getElementById('main1'));
                        // 指定图表的配置项和数据
                        option = {
                            title: {
                                text: '过程质量',
                                left: 'center'
                            },
                            tooltip: {
                                trigger: 'item'
                            },
                            legend: {
                                orient: 'vertical',
                                left: 'left'
                            },
                            series: [
                                {
                                    name: '类型',
                                    type: 'pie',
                                    radius: '50%',
                                    data:data.data.processqualitiesChart,
                                    emphasis: {
                                        itemStyle: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                    }
                                }
                            ]
                        };
                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);
                        // 基于准备好的dom，初始化echarts实例
                        var myChart2 = echarts.init(document.getElementById('main2'));
                        // 指定图表的配置项和数据
                        option2 = {
                            title: {
                                text: '客户抱怨',
                                left: 'center'
                            },
                            tooltip: {
                                trigger: 'item'
                            },
                            legend: {
                                orient: 'vertical',
                                left: 'left'
                            },
                            series: [
                                {
                                    name: '类型',
                                    type: 'pie',
                                    radius: '50%',
                                    data:data.data.customercomplaintChart,
                                    emphasis: {
                                        itemStyle: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                    }
                                }
                            ]
                        };
                        // 使用刚指定的配置项和数据显示图表。
                        myChart2.setOption(option2);
                    }
                },"json")
            }
        },updated: function () {
            layui.use(['form'], function(){
                var form = layui.form;
                form.render();
            })
        }
    })
</script>
</html>
